<template>
    <el-dialog v-model="visible" class="pay-dialog" append-to-body :close-on-click-modal="false"
        :close-on-press-escape="false" :lock-scroll="false" top="20vh" width="300px" @closed="onClosed">
        <div class="dialog-title">微信扫描支付</div>
        <img class="qr-code" :src="QrCodeUrl" v-if="!!QrCodeUrl" />
        <div class="qr-code-block" v-else v-loading="!QrCodeUrl"></div>
        <div class="dialog-footer">
            <span class="text" @click="onAlipay">使用支付宝支付 ></span>
        </div>
    </el-dialog>
</template>
<script setup>
import { GetWorkPay, GetOrderStatus } from "~/api";
import QRCode from "qrcode";

const emits = defineEmits(["success"]);
const visible = ref(false);
const QrCodeUrl = ref("");
const work_id = ref("");
const opts = {
    errorCorrectionLevel: "H",
    type: "image/jpeg",
    quality: 0.8,
    margin: 1,
    color: {
        dark: "#000",
        light: "#fff",
    },
};
let timer = null;
let pay_channel = null;
let back_order_no = null;

const refreshOrder = () => {
    timer = setTimeout(async () => {
        const res = await GetOrderStatus({
            order_no: back_order_no,
            type: 3,
        });

        if (res.data == 1) {
            Message().success({
                message: "支付成功！",
                duration: 1500,
                onClose() {
                    clearTimeout(timer);
                    visible.value = false;
                    emits("success");
                },
            });
        } else {
            refreshOrder();
        }
    }, 3000);
};

const onPay = async ({ pay_channel }) => {
    let params = {
        pay_channel,
        order_no: back_order_no,
        work_id: work_id.value,
    };
    let res = await GetWorkPay(params);
    if (res.code == 200) {
        const { order_no, content } = res.data;
        back_order_no = order_no;

        if (pay_channel === 1) {
            const url = await QRCode.toDataURL(content.code_url, opts);
            QrCodeUrl.value = url;
        } else {
            alipayForm(content);
            clearTimeout(timer);
            visible.value = false;
        }
        refreshOrder();
    } else {
        Message().error(res.msg);
    }
};

const onAlipay = () => {
    pay_channel = 2;
    onPay({ pay_channel });
};

const onClosed = () => {
    QrCodeUrl.value = "";
    clearTimeout(timer);
};

defineExpose({
    show({ id }) {
        back_order_no = null;
        visible.value = true;
        work_id.value = id;
        pay_channel = 1;
        onPay({ pay_channel });
    },
});
</script>
<style lang="scss">
.pay-dialog {
    background-color: rgba($color: #333, $alpha: 1) !important;

    .el-dialog__headerbtn {
        top: 0;
    }

    .el-dialog__header {
        margin-bottom: 0;
        padding-top: 5px;
    }

    .el-dialog__body {
        padding: 20px 20px 30px;
    }

    .qr-code {
        display: block;
        width: 200px;
        height: 200px;
        margin: 0 auto;

        &-block {
            display: block;
            width: 200px;
            height: 200px;
            background-color: #fff;
            margin: 0 auto;
        }
    }

    .dialog-title {
        text-align: center;
        font-size: 20px;
        color: #fff;
        margin-bottom: 40px;
    }

    .dialog-footer {
        margin-top: 20px;
        text-align: center;

        .text {
            color: #aaa;
            cursor: pointer;
            user-select: none;
        }
    }
}
</style>
